<template >
  <div>
    <el-container style="height: 100vh; border: 1px solid rgba(171,248,248,0.49)">
      <el-aside width="200px" height="100%" style="background-color: rgb(125,198,243)">
        <el-menu :default-openeds="['2', '3']" height="100%">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-s-home"></i>房源信息</template>
            <el-menu-item-group>
              <router-link to="/tenant_main" style="color: black"><el-menu-item index="1-1">房屋信息</el-menu-item></router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>个人</template>
            <el-menu-item-group>
              <router-link to="/tenant_lease" style="color: black"><el-menu-item index="2-1" >我的租赁</el-menu-item></router-link>
              <router-link to="/tenant_repaire"><el-menu-item index="2-2">报修</el-menu-item></router-link>
              <el-menu-item index="2-3" style="color: #409EFF;">修改个人信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px; background-color: rgba(171,248,248,0.49)">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/" style="color: black"><el-dropdown-item>退出</el-dropdown-item></router-link>
              <el-dropdown-item>
                <el-button type="text" @click="outerVisible = true" style="color: black">个人信息</el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="outerVisible"
                  width="30%"
                  append-to-body
                  :before-close="handleClose">

                  <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="账号" style="margin-right: 50px">
                      <el-input :value="form.tphone"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" style="margin-right: 50px">
                      <el-input :value="form.tename"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                      <el-radio disabled v-model="form.sex"  label="男">男</el-radio>
                      <el-radio disabled v-model="form.sex" label="女">女</el-radio>
                    </el-form-item>
                    <el-form-item label="年龄" style="margin-right: 50px">
                      <el-input :value="form.age"></el-input>
                    </el-form-item>
                    <el-form-item label="目前居住地" style="margin-right: 50px">
                      <el-input :value="form.liveaddress"></el-input>
                    </el-form-item>
                  </el-form>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="outerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="outerVisible = false">确 定</el-button>
                  </span>
                </el-dialog>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span v-text="name"></span>
        </el-header>

        <el-main>
          <el-row style="width: 800px;margin-left: 180px">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="账号" style="margin-right: 50px">
                  <el-input disabled v-model="form.tphone"></el-input>
                </el-form-item>
                <el-form-item label="姓名" style="margin-right: 50px">
                  <el-input disabled v-model="form.tename"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio disabled v-model="form.sex"  label="男">男</el-radio>
                  <el-radio disabled v-model="form.sex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="年龄" style="margin-right: 50px">
                  <el-input disabled v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="目前居住地" style="margin-right: 50px">
                  <el-input disabled v-model="form.liveaddress"></el-input>
                </el-form-item>
                <br>
                <el-button type="primary" style="width: 500px; margin-left: 120px" @click="cphone=true">换绑手机号</el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="cphone"
                  width="30%"
                  append-to-body
                  :before-close="handleClose">

                  <el-form ref="form" :model="cphonedata" label-width="100px">
                    <el-form-item label="原手机号" :rules="[
                      {required:true,message:'手机号不能为空',trigger:'blur'},
                      {type: 'number',message: '手机号必需为数字',trigger:'blur'}]" style="margin-right: 50px">
                      <el-input v-model.number="cphonedata.oldphone"></el-input>
                    </el-form-item>
                    <el-form-item label="新手机号" :rules="[
                      {required:true,message:'手机号不能为空',trigger:'blur'},
                      {type: 'number',message: '手机号必需为数字',trigger:'blur'}]" style="margin-right: 50px">
                      <el-input v-model.number="cphonedata.newphone"></el-input>
                    </el-form-item>
                    <el-form-item label="账号密码" :rules="[
                      {required:true,message:'密码不能为空',trigger:'blur'}]" style="margin-right: 50px">
                      <el-input v-model="cphonedata.password"></el-input>
                    </el-form-item>
                  </el-form>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="cphone = false">取 消</el-button>
                    <el-button type="primary" @click="cphone = false,changePhone(cphonedata)">确 定</el-button>
                  </span>
                </el-dialog>
                <br><br>
                <el-button type="primary" style="width: 500px; margin-left: 120px" @click="cpass=true">修改密码</el-button>
                <el-dialog
                  title="提示"
                  :visible.sync="cpass"
                  width="30%"
                  append-to-body
                  :before-close="handleClose">

                  <el-form ref="form" :model="cpwd" label-width="100px">
                    <el-form-item label="旧密码" :rules="[
                      {required:true,message:'旧密码不能为空',trigger:'blur'}]" style="margin-right: 50px">
                      <el-input v-model="cpwd.oldpwd"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" :rules="[
                      {required:true,message:'密码不能为空',trigger:'blur'},
                      {type: 'number',message: '密码需为数字',trigger:'blur'}]" style="margin-right: 50px">
                      <el-input v-model="cpwd.newpwd"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" :rules="[
                      {required:true,message:'密码不能为空',trigger:'blur'}]" style="margin-right: 50px">
                      <el-input v-model="cpwd.againnewpwd"></el-input>
                    </el-form-item>
                  </el-form>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="cphone = false">取 消</el-button>
                    <el-button type="primary" @click="cpass = false,changepwd(cpwd)">确 定</el-button>
                  </span>
                </el-dialog>
              </el-form>

            </el-form>
          </el-row>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "tenant_personaliInfo",
  data() {
    return {
      tableData: [],
      name: sessionStorage.getItem("name"),
      form:{},
      outerVisible: false,
      cphone:false,
      cpass: false,
      cphonedata: {
        oldphone: '',
        newphone: '',
        password: ''
      },
      cpwd: {
        oldpwd: '',
        newpwd: '',
        againnewpwd: ''
      }
    }
  },
  created() {
    this.getinfo()
    this.getPersonalInfo()
  },
  methods:{
    getinfo(){
      this.$axios({
        url: '/tenant/getLease'
      })
        .then(successResponse =>{
          this.tableData = successResponse.data
        })
        .catch(failResponse =>{
        })
    },
    getPersonalInfo(){
      this.$axios({
        url: '/tenant/getPersonalInfo',
        params:{
          id: sessionStorage.getItem("id")
        }
      })
        .then(successResponse =>{
          this.form = successResponse.data
        })
    },
    changePhone(data){
      if (data.oldphone === data.newphone){
        alert("两个手机号码一致")
      }
      else if (data.password != this.form.password){
        alert("密码错误")
      }
      else{
        this.$axios({
          url: '/tenant/updatephone',
          params:{
            id: sessionStorage.getItem("id"),
            phone: this.cphonedata.newphone
          }
        }).then(successResponse =>{
          if (successResponse.data === "exit"){
            alert("当前手机号已经存在")
          }else if (successResponse.data === "success"){
            alert("手机号修改成功，请重新登录")
            this.$router.push('/tenantLogin')
          }
          else {
            alert("错误代码：500")
          }
        })
      }
      this.cphonedata={}
    },
    changepwd(data){
      if (data.oldpwd != sessionStorage.getItem("pwd")){
        alert("旧密码输入错误")
      }
      else if (data.newpwd != data.againnewpwd){
        alert("两次密码输入不一致")
      }
      else{
        this.$axios({
          url: '/tenant/updatepwd',
          params:{
            id: sessionStorage.getItem("id"),
            newpwd: this.cpwd.newpwd
          }
        }).then(successResponse =>{
          if (successResponse.data === "success"){
            alert("密码修改成功")
          }
          else {
            alert("错误代码：500")
          }
        })
      }
      this.cpwd={}
    }
  }
}
</script>

<style scoped>

html{
  width: 100%;
  height: 100%;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

router-link {
  text-decoration: none;
  color: black;
}
a{
  text-decoration: none;
}
</style>

